<template>
	<view class="content">
		<view class="text-area">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">新建备忘</block>
			</cu-custom>

			<view class="login-img">
				<view class="owl-login" :class="hideEyes?'password':''">
					<view class="hand"></view>
					<view class="hand hand-r"></view>
					<view class="arms">
						<view class="arm"></view>
						<view class="arm arm-r"></view>
					</view>
				</view>
			</view>
			<view class="textarea_from">
				<u--form :model="loginForm" ref="uLoginForm">
					<view>
						<text class="title">今日备忘</text>
						<br />
						<p style="font-weight: bold;margin-top: 8px;">{{dateFormat(date)}}</p>
					</view>
					<u-form-item prop="title">
						<u-input v-model="loginForm.title" placeholder="备忘主题" style="background-color: white" />
					</u-form-item>
					<u-form-item prop="content">
						<u--textarea v-model="loginForm.content" @focus="passwordF_B" @blur="passwordF_B" height=160
							count :maxlength="maxlength" placeholder="请输入备忘内容" border="bottom"></u--textarea>
					</u-form-item>
					<view class="btn_Box">
						<button type="primary" class="submitBtn" @click="add()">备忘新建</button>
						<button type="warn" class="resetBtn" @click="resetFrom()">备忘重置</button>
					</view>
				</u--form>
			</view>
			<!--弹出层-->
			<u-overlay :show="show" @click="show = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<u-form>
							<view class="title" style="text-align: center;margin-top: 10px;">
								<text style="font-size: 15px;">新增成功，是否现在去查看？</text>
							</view>
							<view class="login_register">
								<button type="primary" class="btn_yes" size="small" shape="square" @click="btn_yes">是
								</button>
								<button type="primary" class="btn_no" size="small" shape="square" @click="btn_no">否
								</button>
							</view>
						</u-form>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				hideEyes: false,
				date: new Date().toISOString(),
				height: 290,
				maxlength: 200,
				loginForm: {
					content: "",
					title: ""
				},
			}
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},

		computed: {
			userId() {
				return this.$store.getters.getId;
			},

		},
		methods: {
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			btn_yes() {
				this.show = false;
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			btn_no() {
				this.show = false
			},
			add() {
				if (!this.userId) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				} else {
					uni.request({
						url: this.$api + '/memo/addMemo',
						data: {
							content: this.loginForm.content,
							title: this.loginForm.title,
							userId: this.userId,
							date: this.dateFormat(this.date)
						},
						method: 'post',
						header: {
							'content-type': 'application/json'
						},
						success: (res) => {
							this.show = true
						},
						fail: (err) => {
							console.log(err)
							uni.showToast({
								title: '网络或接口出现错误',
								icon: 'none'
							});
						}
					})
				}
			},
			resetFrom() {
				this.$refs.uLoginForm.resetFields()
			},
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			formSubmit(e) {
				console.log(e.detail.value);
			}
		}
	}
</script>
<style>
	page {
		background-image: url(../../static/image/background.jpeg);
		background-repeat: ;
	}
</style>
<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 220px;
		height: 80px;
		background-color: #F0F0F0;
		border-radius: 25px;
	}

	.btn_yes,
	.btn_no {
		margin: 5px;
		padding: 5px 10px;
		display: inline;
	}

	.login_register {
		text-align: center;
		margin-top: 5px;
	}

	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 100rpx;
	}

	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}

	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}

	.owl-login .hand.hand-r {
		left: 170px;
	}

	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}

	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}

	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}

	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}

	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}

	.textarea_from {
		margin: -9px 10px 0 10px;
		background: #007AFF;
		border-radius: 10px;
		background-color: #EEEEEE;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;

	}

	.title {
		font-size: 22px;
		margin-bottom: 5px;
		font-weight: bold;

	}

	.btn_Box {
		text-align: center;
	}

	.submitBtn,
	.resetBtn {
		
		display: inline-block;
		margin: 5px;
	}
</style>
